<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>


  <script>
    // vue 2.x 
    function defineProperty(obj, key, value) {
      observer(value)//递归
      Object.defineProperty(obj, key, {
        get: () => {
          console.log(value, 'get')
        },
        set: (newVal) => {
          console.log(newVal, 'set')
        }
      })
    }

    function observer(target) {
      // console.log(target);
      //基本数据类型直接返回
      if (typeof target !== 'object' || typeof target == null) {
        return target
      }
      //循环重新定义data里面的属性和值
      for (let key in target) {
        defineProperty(target, key, target[key])
      }
    }

    const p = {
      name: 'c',
      age: 12,
      parents: {
        dad: 'a',
        mom: 'b'
      }
    };

    observer(p);
    p.name = 'haha'
    p.name;


  </script>
</body>

</html>